<template>
    <section class="BasicInfoSettings-section">
        <!--基本资料表单-->
        <a-form layout="horizontal" :form="form">
            <a-form-item :wrapperCol="{ span: 24 }" class="clearfix topBar">
                <h4>基本资料</h4>
                <aside>
                    <a-button v-if="isShowInformation" @click="showBasicInfo"><i class="iconfont icon-cencel"></i> 取消</a-button>
                    <a-button htmlType="submit" type="primary" v-if="isShowInformation" @click="submitBasicInfo"><i class="iconfont icon-submit"></i> 保存</a-button>
                    <a-button type="primary" v-if="!isShowInformation" @click="showBasicInfo"><i class="iconfont icon-xiugai"></i> 修改</a-button>
                </aside>
            </a-form-item>

            <ul v-show="!isShowInformation" class="borderBottom-box">
                <li class="clearfix">
                    姓名：&nbsp;&nbsp;{{isNull0(formBasicInfo.name)}}
                </li>
                <li>
                    称谓：&nbsp;&nbsp;{{sex_FN(formBasicInfo.sex)}}
                </li>
                <li>
                    出生日期：&nbsp;&nbsp;{{momentFormat(formBasicInfo.birthdate, 'YYYY-MM-DD')}}
                </li>
                <li>
                    QQ：&nbsp;&nbsp;{{isNull0(formBasicInfo.qq)}}
                </li>
                <li>
                    微信：&nbsp;&nbsp;{{isNull0(formBasicInfo.weixin)}}
                </li>
                <li>
                    邮箱：&nbsp;&nbsp;{{isNull0(formBasicInfo.email)}}
                </li>
            </ul>
            <div v-show="isShowInformation">
                <a-form-item label="姓名" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-input placeholder="请输入姓名"
                             v-decorator="['name', {rules: [
                                    { required: true, message: '请输入您的姓名', trigger: 'blur' }
                                ]}]"/>
                </a-form-item>
                <a-form-item label="称谓" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-radio-group style="padding: 0 20px 0 0;"
                                   v-decorator="['sex', {rules: [
                                        { required: true, message: '请指定您的称谓', trigger: 'change' }
                                   ]}]">
                        <a-radio value="1">先生</a-radio>
                        <a-radio value="0">女士</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="生日" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-date-picker format="YYYY-MM-DD" :disabledDate="disabledDate" placeholder="请选择您的出生日期" style="width: 100%"
                                   v-decorator="['birthdate']" />
                </a-form-item>

                <a-form-item label="QQ" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-input placeholder="请输入您的联系QQ"
                             v-decorator="['qq', {rules: [
                                { message: '请输入您的QQ号码', trigger: 'blur' }
                             ]}]"/>
                </a-form-item>
                <a-form-item label="微信" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-input placeholder="请输入您的微信"
                             v-decorator="['weixin', {rules: [
                                { message: '请输入您的微信', trigger: 'blur' }
                             ]}]"/>
                </a-form-item>
                <a-form-item label="邮箱" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" hasFeedback>
                    <a-input type="email" placeholder="请输入邮箱"
                             v-decorator="['email', {rules: [
                                {required: true, validator: this.email_validation, trigger: 'blur' },
                            ]}]">
                            <i slot="prefix" class="iconfont icon-dkw_youxiang"></i>
                    </a-input>
                </a-form-item>
            </div>
        </a-form>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isShowInformation: false, // 基本资料展示和修改是否显示/隐藏
                formBasicInfo: {
                    name: '', // 姓名
                    sex: '1', // 称谓
                    birthdate: null, // 出生日期
                    qq: '', // QQ
                    weixin: '', // 微信
                    email: '', // 邮箱
                },
                form: this.$form.createForm(this),


            }
        },
        computed: {},
        created() {
        },
        mounted() {
            this.$nextTick(() => {
                //获取个人基本信息数据
                this.getUserInfo();
            });
        },
        destroyed() {
        },
        methods: {
            // 出生日期——选项配置——只能选择今天之前的日期
            disabledDate(current) {
                return current && current > this.$moment().endOf('day');
            },
            // 获取个人基本信息数据
            getUserInfo() {
                this.$get('/user/basics/info').then(res => {
                    if (res.status == 0) {
                        this.formBasicInfo.name = res.data.name || '';
                        this.formBasicInfo.sex = res.data.sex ? res.data.sex.toString() : '';
                        this.formBasicInfo.birthdate = res.data.birthdate || null;
                        this.formBasicInfo.qq = res.data.qq || '';
                        this.formBasicInfo.weixin = res.data.weixin || '';
                        this.formBasicInfo.email = res.data.email || '';

                        //给antd表单项赋值
                        this.form.setFieldsValue({
                            name: res.data.name || '', // 姓名
                            sex: res.data.sex.toString() || '1', // 称谓
                            birthdate: res.data.birthdate ? this.$moment(res.data.birthdate) : null, // 出生日期
                            qq: res.data.qq || '', // QQ
                            weixin: res.data.weixin || '', // 微信
                            email: res.data.email || '', // 邮箱
                        });

                        //更新公共头部和state里user登陆者信息的头像
                        this.$store.commit('set_user', {
                            name: res.data.name,
                            headPhoto: res.data.photo,
                        });

                        // 更新用户登录信息和main.js里的全局守卫使用
                        this.setLocalStorage('userName', res.data.name);
                        this.setLocalStorage('userHeadPhoto', res.data.photo);
                    } else{
                        console.log(res.msg);
                    }
                })
            },
            // 基本资料展示和修改切换
            showBasicInfo() {
                this.isShowInformation = !this.isShowInformation
            },
            // 提交基本资料保存信息
            submitBasicInfo(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.$post('/user/basics/update', {
                            name: values.name, //姓名
                            sex: values.sex, //性别
                            birthDate: this.momentFormat(values.birthdate._d, 'YYYY-MM-DD'),// 生日
                            qq: values.qq, //QQ
                            weiXin: values.weixin, //微信
                            email: values.email, //邮箱
                        }).then(res => {
                            if (res.status == 0) {
                                this.$message.success('您的基本资料修改成功！');
                                //更新用户基本资料
                                this.getUserInfo();
                                this.isShowInformation = false;  // 基本资料展示和修改切换
                            } else {
                                this.$message.warning(res.msg);
                            }
                        })
                    } else {
                        this.$message.error('表单项选择有误，请检查并确定选择！');
                    }
                });
            },

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
</style>
